<template>
  <div id="delivery" style="background:white;min-height:500px;border: 1px solid #DCDFE6">

      <div style="background: #F5F7FA;border-bottom: 1px solid #E4E7ED;">
        <el-radio-group v-model="state">
          <el-radio-button label="0">简历筛选中</el-radio-button>
          <el-radio-button label="1">面试中</el-radio-button>
          <el-radio-button label="2">笔试中</el-radio-button>
          <el-radio-button label="3">已通过</el-radio-button>
          <el-radio-button label="4">未通过</el-radio-button>
        </el-radio-group>
      </div>
    <div  class="delivery_tab" style="padding:10px">
      <div class="sub-li" v-for="deliver in deliverList" :key ="deliver.deliverId" >
        <div class="sub-li-right">
          <div>
            <div class="company_img" @click="goJobDetail(deliver.job.jobId)" style="cursor: pointer">
              <img style="width:60px;height:60px"
                   :src="deliver.job.company.companyLogoUrl"
                   alt="">
            </div>
            <div class="company-info">
              <h3>{{ deliver.companyName }}</h3>
              <p class="company_text">
                {{ deliver.job.company.companyScale}}人
                <el-divider direction="vertical"></el-divider>
                {{ deliver.job.company.industry }}
                <el-divider direction="vertical"></el-divider>
                {{ deliver.job.company.companyType==0?'国企':deliver.job.company.companyType==1?'央企':deliver.job.company.companyType==2?'民企':'外企' }}
                <el-divider direction="vertical"></el-divider>
                {{ deliver.job.company.financeList }}
              </p>
            </div>
            <div  v-show="deliver.state==0" class="delivery_tag"><el-button
                                                 @click="deleteDeliver(deliver.deliverId)" size="mini"> 取消投递</el-button></div>
            <el-divider direction="horizontal"></el-divider>
            <p class="company_text" >
              投递职位：<span>{{ deliver.jobName }}</span>
              <span style="position:absolute;top:0;left:45%;">工作城市：{{codeToText(deliver.job.cityCode)}}</span>
              <span style="float: right">投递于 {{ deliver.createTime }}</span>
            </p>
          </div>
        </div>
      </div>

    </div>
    <el-empty v-show="deliverList.length==0" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import {CodeToText} from "element-china-area-data";
import {delDeliver, getDeliverList} from "@/network/recruit";

export default {
  name: "Delivery",
  data(){
    return{
      state:"0",
      deliverList:[],

    }
  },
  mounted(){
    this.delverMyList();
  },
  watch:{
    state(){
      this.delverMyList();
    }
  },
  methods:{
    codeToText(value){
      return CodeToText[value];
    },
    delverMyList(){
      const userId = localStorage.getItem("common_userId");
      getDeliverList(userId,this.state).then(res=>{
        if(res!=undefined){
          this.deliverList = res.data.data;
        }
      })
    },
    deleteDeliver(deliverId){
        delDeliver(deliverId).then(res=>{
          if(res!=undefined){
            this.$message.success("取消投递成功！");
            this.delverMyList();
          }
        })
    },
    goJobDetail(jobId){
      this.$router.push({name:"jobDetail",params:{jobId:jobId}});
    }
  }
}
</script>

<style scoped>

/deep/ .el-tabs__content {
  min-height: 435px;
  box-shadow: 0 5px 5px 0 #eceaea;
}

.sub-li {
  margin-bottom:20px;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
}
p {
  margin: 0 0;
}

.name {
  display: inline-block;
  font-size: 18px;
  color: #428af5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  display: inline-block;
  color: #fc6c38;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-text {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}


.company-info {
  display: inline-block;
  height: 60px;
  margin-left: 16px;
  width:600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.delivery_tag{
  display: inline-block;
  float:right;
}
.company-info h3 {
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: #428af5;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
}

.company_text {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #8d92a1;
  position: relative;
}

.company_img {
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  float: left;
}
</style>